<template>
  <i :class="iconClass" @click="handleClick" :style="iconStyle"></i>
</template>

<script>
import Config from "/src/config";
export default {
  name: "Icon",
  props: {
    name: String,
    customIcon: String,
    size: [String, Number],
    color: String,
  },
  data() {
    return {
      classPrefix: `${Config.classPrefix}-icon`,
    };
  },
  computed: {
    iconClass() {
      const isPrefix = this.name && this.name.indexOf(this.classPrefix) === 0;
      return [
        this.name && `${this.classPrefix}`,
        this.customIcon && `${this.customIcon}`,
        this.name && isPrefix && `${this.name}`,
        this.name && !isPrefix && `${this.classPrefix}-${this.name}`,
      ];
    },
    iconStyle() {
      return {
        fontSize: parseFloat(this.size) + "px",
        color: this.color,
      };
    },
  },
  methods: {
    handleClick(event) {
      this.$emit("click", event);
    },
  },
};
</script>
